<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 网络来源图片 要是通过img标签显示 需要添加mate标签 -->
    <meta name="referrer" content="never">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/xiangqingye.css">
    <link rel="stylesheet" href="../css/tongyong.css">
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<h1>商品详情</h1>
<div class="container">
</div>


<body>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/tools.js"></script>
    <script>
        //1，通过tools.js中封装的函数获取浏览器地址栏传参数据
        const valObj = myGetUrlValObj();
        console.log(valObj.goods_id);
        //2,发送请求获取响应体数据
        const xhr = myPromiseJQueryAjax('../server/goods_detail.php', 'post', {
            goods_id: valObj.goods_id
        }, 'json');
        xhr.then(function(res) {
            console.log(res);
            //根据结果动态生成页面
            let str = `
            <div class="panel panel-default ">
    <div class="panel-heading">
        <h3 class="panel-title">商品详细信息</h3>
    </div>
    <div class="panel-body">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" src="${res.goods_big_logo}" alt="...">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">${res.goods_name}</h4>
                <p class="p1">
                    <i class="glyphicon glyphicon-yen"></i>
                    <span>${res.goods_price}</span>
                </p>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">XL</button>
                    <button type="button" class="btn btn-default">L</button>
                    <button type="button" class="btn btn-default">M</button>
                    <button type="button" class="btn btn-default">S</button>
                    <button type="button" class="btn btn-default">XS</button>
                </div>
                <p style="position:relative">
                    <input value="1" class="num">
                    <button name="减" type="button" class="jian btn btn-default">-</button>
                    <button name="加" type="button" class="jia btn btn-default">+</button>
                </p>
                <p>
                    <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                    <a href="javascript:;" name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
                </p>
            </div>
        </div>
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
            <li role="presentation"><a href="#">商品参数信息</a></li>
            <li role="presentation"><a href="#">相关商品</a></li>
        </ul>
        <div>
            ${res.goods_introduce}
        </div>
    </div>
</div>
            `;
            $('.container').html(str);
            //3，给加，减按钮添加点击事件
            //页面内容是动态生成的给父级添加点击事件
            //通过事件委托来完成效果
            $('.container').click(function(e) {

                if (e.target.getAttribute('name') === '减') {
                    //如果input中的数据为-1之后再赋值回来
                    //如果小于1就赋值1，如果大于1就赋值这个数值本身
                    $('.num').val($('.num').val() - 1 < 1 ? 1 : $('.num').val() - 1);

                } else if (e.target.getAttribute('name') === '加') {
                    //如果input中的数据为+1之后再赋值回来
                    //如果大于库存就赋值就赋值存储数值本身，如果小于存储就赋值这个数值本身
                    $('.num').val($('.num').val() - 0 + 1 > res.goods_number ? res.goods_number : $('.num').val() - 0 + 1)
                        //4，点击购物车
                } else if (e.target.getAttribute('name') === 'cart') {
                    //(1)判断用户有没有登录
                    //如果没有就跳转登录页面去执行登录操作
                    //获取cookie数据对象
                    const cookieObj = myGetCookie()
                        //没有登陆的情况
                    if (cookieObj.login !== '1') {
                        //登录状态码不是1，证明没有登录
                        //弹出提示框，点击确认跳转登录页面
                        if (window.confirm('你没有的登录账号，请先登录，点击确认跳转登录页面')) {
                            window.location.href = `./denglu.html?url=${window.location.href}`
                        }
                        //终止后面的所有操作
                        return;
                    }
                    //(2)，已经登录情况
                    //获取购物车数据信息
                    //没有购物车信息获取结果是undefined
                    let cart = localStorage.cart;
                    console.log(cart)
                    console.log(res)
                    if (cart === undefined) {
                        //说明内有创建购物车信息，直接添加商品信息
                        //给当前商品的商品信息添加属性和属性值
                        //判断购买数量符合数值范围
                        //购买数量：1-存储数量
                        if (!($('.num').val() - 0 >= 1 && $('.num').val() - 0 <= res.goods_number)) {
                            //如果不等于1-存储数量，弹出提示框
                            window.alert('你输入的商品数量有误，请重新输入');
                            return;
                        }
                        //购买数量
                        res.num = $('.num').val() - 0;
                        //购买状态，新增商品默认是购买
                        res.buy = true;
                        //localStorage字符串和json字符串
                        //将商品信息转化为json字符串存储
                        //存储的数据结构必须是数组中存储的对象，不能直接存储对象
                        //localStorage.setItem('cart',JSON.stringify([res]));
                        localStorage.cart = JSON.stringify([res]);

                        //购物车数据已经存在
                    } else {
                        //x先将存储的json字符串还原为对应的数据类型
                        cart = JSON.parse(cart);
                        //当前购物车是一个空数组
                        if (cart.length === 0) {
                            //直接添加商品信息
                            if (!($('.num').val() - 0 >= 1 && $('.num').val() - 0 <= res.goods_number)) {
                                window.alert('购买数量有误');
                                return;
                            }
                            res.num = $('.num').val()
                            res.buy = true;
                            localStorage.cart = JSON.stringify([res]);


                            //当前购物车不是空车
                        } else {
                            //如果购物车没有这个商品直接添加
                            //如果购物车有这个商品添加购买数量
                            //当前商品在购物车中结果是true
                            //如果不在购物车结果是flase
                            let bool = cart.some(function(val) {
                                //购物车商品id和当前商品id相等
                                return val.goods_id === res.goods_id;
                            })
                            if (bool) {
                                //给对应的商品添加购买数量
                                //循环遍历找到goods_id相同的商品
                                for (let i = 0; i <= cart.length - 1; i++) {
                                    if (cart[i].goods_id === res.goods_id) {
                                    // 如果 购物车商品id 和 当前商品id 相同
                                    // 添加 购买商品个数
                                    let numAdd = (cart[i].num - 0) + ($('.num').val() - 0);

                                    // 判断 添加 新的数量之后 购买 数量 在 正确的范围之间
                                    if (!(numAdd >= 1 && numAdd <= cart[i].goods_number)) {
                                            window.alert('您输入的商品范围有误');
                                            return;
                                        }
                                    //修改购物车数据中购买商品的数量
                                    cart[i].num=numAdd;
                                    //将新的购物车数据数组再设定给localStorage中购物车数据
                                    localStorage.cart=JSON.stringify(cart);
                                    }
                                }
                    //当前购物车中没有当前要添加的这个商品
                            }else{
                    //补充当前商品的购买数量和购买数量
                    //将新的对象写入到数组的起始位置
                    //将新的数组设定给localStorage中购物车数据
                                if(!($('.num').val()-0>=1&&$('.num').val()-0<=res.goods_number)){
                                    window.alert('你输的商品数据有误');
                                    return;
                                }
                                res.num=$('.num').val()-0;
                                res.buy=true;

                                cart.unshift(res);
                                localStorage.cart=JSON.stringify(cart);
                            }
                        }
                    }
                    //添加完购物车信息后跳转购物车页面
                    window.location.href='./gouwuche.html';

                }
            })
        })
    </script>

</body>

</html>